import React, { memo } from 'react';
import { shallowEqual, useSelector } from 'react-redux';

import { Layout } from 'antd';
import { ToDuListWrapper } from './style';
import Form from './c_components/Form';
import DataList from './c_components/DataList';
import Footers from './c_components/Footer';

const { Header, Footer, Content } = Layout;

export default memo(function ToDuList() {
  const { todolist } = useSelector(
    (store) => ({
      todolist: store.todolist
    }),
    shallowEqual
  );

  return (
    <ToDuListWrapper>
      <Layout className="todolist-layout">
        <Header>
          <h3 className="logo">TodoList</h3>
        </Header>
        <Content className="todolist-content">
          <Form />
          <DataList list={todolist} />
          <Footers />
        </Content>
        <Footer style={{textAlign:'center'}}>todolist 使用 react hooks + antd 开发 结合redux-thunk管理 实现添加，修改，删除，搜索，拖拽 功能 </Footer>
      </Layout>
    </ToDuListWrapper>
  );
});
